<!--
 * @Description:
 * @Author: cgt
 * @Date: 2021-10-20 17:40:38
 * @LastEditors: cgt
 * @LastEditTime: 2021-12-28 19:56:42
-->
<template>
  <div>
    <el-button @click="highlight">高亮元素</el-button>
    <el-button @click="startFlash">闪烁</el-button>
    <el-button @click="stopFlash">取消闪烁</el-button>
    <el-button @click="cancle">取消高亮</el-button>
  </div>
</template>

<script>
import mixins from '../mixins';
export default {
  name: 'HighlightTool',
  props: {
    getTool: {
      type: Function,
      required: true
    }
  },
  mixins: [mixins],
  methods: {
    highlight() {
      var features = [];
      // polygon
      // var polygonFeatures = turf.randomPolygon(1, {
      //   bbox: this.getTool("BaseMapTool").getBounds(),
      //   max_radial_length: 0.1,
      // }).features;
      // features = features.concat(
      //   polygonFeatures.map((feature) => {
      //     feature.properties.sourceType = "Polygon";
      //     feature.properties["color"] = this.$MapUtils.RandomUtil.randomHexColor();
      //     feature.properties["opacity"] = 1;
      //     return feature;
      //   }),
      // );
      // line
      var lineFeatures = turf.randomLineString(3, {
        bbox: this.getTool('BaseMapTool').getBounds(),
        // eslint-disable-next-line camelcase
        max_length: 0.1
      }).features;
      features = features.concat(
        lineFeatures.map((feature) => {
          feature.properties.sourceType = 'LineString';
          feature.properties['color'] = this.$MapUtils.RandomUtil.randomHexColor();
          feature.properties['opacity'] = 1;
          feature.properties['width'] = 3;
          return feature;
        })
      );
      // point
      var pointFeatures = turf.randomPoint(10, {
        bbox: this.getTool('BaseMapTool').getBounds(),
        // eslint-disable-next-line camelcase
        max_length: 0.1
      }).features;

      features = features.concat(
        pointFeatures.map((feature) => {
          feature.properties.sourceType = 'Point';
          feature.properties.size = 10;
          feature.properties.color = this.$MapUtils.RandomUtil.randomHexColor();
          feature.properties.outlineColor = '#ff0000';
          feature.properties.outlineWidth = 3;
          feature.properties.opacity = 1;
          return feature;
        })
      );


      this.getTool('HighlightTool').highlight(features);
    },
    startFlash() {
      this.getTool('HighlightTool').startFlash();
    },
    stopFlash() {
      this.getTool('HighlightTool').stopFlash();
    },
    cancle() {
      this.getTool('HighlightTool').unhighlight();
    }
  }
};
</script>

<style scoped></style>
